// 登录页面


import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import { useSelector } from "react-redux"
import Icon from "@/components/icon/icon"
import right from '@/assets/img/right.png'
import codeImg from '@/assets/img/yzm.png'
import "./login.scss"
const onFinish = (values) => {
    console.log('提交表单且数据验证成功后回调事件:', values);
};
// const onFinishFailed = (errorInfo) => {
//     console.log('提交表单且数据验证失败后回调事件:', errorInfo);
// };
// const onFinishFailed = (errorInfo) => {
//     console.log('提交表单且数据验证失败后回调事件:', errorInfo);
// };
// const onFieldsChange = (errorInfo) => {
//     console.log('字段更新时触发回调事件:', errorInfo);
// };
// const onValuesChange = (errorInfo) => {
//     console.log('字段值更新时触发回调事件:', errorInfo);
// };
// 必填项验证
const rules = {
    username: [{
        required: true,
        message: '请填写账号/手机号!'
    }, {
        whitespace: true,
        message: '请检查不能输入空格',
    }],
    password: [{
        required: true,
        message: '请填写密码!'
    }, {
        message: '请填写长度大于6位,小于16位的字母和数字组合！',
        pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/
    }],
    code: [{
        required: true,
        message: '请填写验证码!'
    },
    {
        max: 4,
        min: 4,
        message: '请输入4位验证码',
    }]
}
// 输入框的图标
const prefix = (icon, size) => {
    const prefixData = <div className='icon-width dis'>
        <Icon icon={icon} size={size} color="#999999" />
    </div>
    return prefixData
}
const Login = React.memo(function Login(porps) {
    const reduxData = useSelector(state => {
        return state
    })
    return (
        <div className='AllLogin dis' style={{ background: reduxData.Appearance.subjectColor }}>
            <div className='login f-background flex'>
                <div className='login-input por'>
                    <div
                        style={{ background: reduxData.Appearance.subjectColor }}
                        className='round1 poa radius100'
                    ></div>
                    <div
                        style={{ background: reduxData.Appearance.subjectColor }}
                        className='round2 poa radius100'
                    ></div>
                    <div className='size-40 weight-normal color0 margin-bottom20'>XXX欢迎您登录</div>
                    <div className='description size-24 weight-normal color5'>这里是一段详情的描述非常的详情的</div>

                    <Form
                        name="basic"
                        initialValues={{ remember: false }}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item name="username" rules={rules.username}>
                            <Input
                                prefix={prefix('icon-zhanghao', 'size-26')}
                                className='input'
                                placeholder='请输入账号/手机号'
                            />
                        </Form.Item>

                        <Form.Item name="password" rules={rules.password}>
                            <Input.Password
                                prefix={prefix('icon-mima', 'size-30')}
                                className='input'
                                placeholder='请输入密码'
                            />
                        </Form.Item>

                        <Form.Item name="code" rules={rules.code}>
                            <div className='code-img'>
                                <Input
                                    prefix={prefix('icon-yanzhengma1', 'size-28')}
                                    className='input'
                                    placeholder='请输入验证码'
                                />
                                <Button className='img-button' type="primary" htmlType="submit">
                                    <img className='width-height100' src={codeImg} alt="" />
                                </Button>
                            </div>
                        </Form.Item>
                        <Form.Item name="remember" valuePropName="checked">
                            <div className='dis-cen'>
                                <Checkbox>
                                    <div className='size-14 weight-normal color9'>
                                        我已阅读并同意 <i className='color0'>用户协议</i> 和 <span className='color0'>隐私政策</span>
                                    </div>
                                </Checkbox>
                                <span className='size-16 weight-normal color5'>忘记密码？</span>
                            </div>
                        </Form.Item>
                        <Form.Item>
                            <Button className='login-button' type="primary" htmlType="submit">
                                <span className='size-30 weight-normal f-color'>登录</span>
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className='login-img dis por f-background'>
                    <div
                        style={{ background: reduxData.Appearance.subjectColor }}
                        className='mask width-height100 poa app-top-left'
                    ></div>
                    <img src={right} className='img por' alt="" />
                </div>
            </div>
        </div>
    )
})
export default Login;